/**
 * @description：描述
 * @author: zhangYuanTao
 * @date: 2021-07-15 14:20
 * @LastEditTime : 2021-07-15 14:20
 * @FilePath : index
 */
import React, { memo, useEffect, useRef, useState, useCallback } from 'react';

import { BannerWrapper, BannerLeft, BannerRight, BannerControl } from "./style"
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { getTopBannerAction } from "../../store/actionCreators";


import { Carousel } from 'antd';

export default memo(function ZYTTopBanner() {
  // state
  const [currentIndex, setCurrentIndex] = useState(0);

  // ref hooks
  const bannerRef = useRef();
  // shallowEqual 浅层比较
  const { topBanners } = useSelector(state => ({
    topBanners: state.getIn(['recommend', 'topBanners'])
  }), shallowEqual)
  const dispatch = useDispatch();

  //发送网络请求
  useEffect(() => {
    dispatch(getTopBannerAction());
  }, [dispatch]);

  const beforeChange = useCallback((from, to) => {
    setTimeout(() => {
      setCurrentIndex(to);
    }, 0);
  }, [])
  // 其他业务逻辑
  const bgImage = topBanners[currentIndex] && (topBanners[currentIndex]["imageUrl"] + "?imageView&blur=40x20")

  return (
    <BannerWrapper bgImage={ bgImage }>
      <div className="banner wrap-v2">
        <BannerLeft>
          <Carousel effect="fade" ref={ bannerRef } autoplay beforeChange={ beforeChange }>
            {
              topBanners.map((item, index) => {
                return (
                  <div className="banner-item" key={ item.imageUrl }>
                    <img className="image" src={ item.imageUrl } alt={ item.typeTitle } />
                  </div>
                )
              })
            }
          </Carousel>,
        </BannerLeft>
        <BannerRight>

        </BannerRight>
        <BannerControl>
          <button className="btn left" onClick={ e => bannerRef.current.prev() } />
          <button className="btn right" onClick={ e => bannerRef.current.next() } />
        </BannerControl>
      </div>
    </BannerWrapper>
  )
})
